import { worldData, worldNameMap } from './worldMap.js';
import { chinaData } from './chinaMap.js';

// 项目统计配置
let guaranteeOption = {
  color: ['#51B9F4', '#F9BA5D'],
  series: [
    {
      type: 'pie',
      silent: true,
      radius: '99%',
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      hoverAnimation: false,
      label: {
        normal: {
          position: 'inner',
          show: true,
          color: '#ffff',
          textStyle: {
            fontSize: 8 //文字的字体大小
          },
          formatter: '{d}%'
        }
      },
      data: [
        { value: 1048, name: '保内' },
        { value: 735, name: '保外' }
      ],
      emphasis: {}
    }
  ]
};

// 项目总量配置
let totalOption = {
  color: ['#6DE49D', '#8987FF', '#5BBDF3', '#6AD7D1'],
  series: [
    {
      type: 'pie',
      silent: true,
      radius: ['88%', '99%'],
      avoidLabelOverlap: false,
      hoverAnimation: false,
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '试运行' },
        { value: 735, name: '已交付' },
        { value: 580, name: '已验收' },
        { value: 580, name: '已过保' }
      ]
    }
  ]
};

// 设备类型配置
let deviceAllOption = {
  grid: {
    top: 40,
    right: 55,
    bottom: 30,
    left: 55
  },
  color: ['#9A98FF', '#6EDFDF'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    top: 5,
    data: ['设备量', '客户量']
  },
  xAxis: [
    {
      type: 'category',
      data: ['搬运类', '输送类', '包装类', '其它类'],
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        color: '#666666'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#F2F6FC'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      min: 0,
      axisLabel: {
        color: '#999999',
        formatter: '{value}'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#F2F6FC'
        }
      },
      splitLine: {
        show: false
      }
    },
    {
      type: 'value',
      name: '',
      min: 0,
      minInterval: 1,
      axisLabel: {
        color: '#999999',
        formatter: '{value}'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#F2F6FC'
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '设备量',
      type: 'bar',
      silent: true,
      barWidth: 12,
      barGap: 1,
      itemStyle: {
        borderRadius: [6, 6, 0, 0]
      },
      data: [1000, 900, 1200, 600]
    },
    {
      name: '客户量',
      type: 'bar',
      silent: true,
      barWidth: 12,
      barGap: 1,
      yAxisIndex: 1,
      itemStyle: {
        borderRadius: [6, 6, 0, 0]
      },
      data: [100, 90, 120, 60]
    }
  ]
};

// 地图配置项--全球
let mapOption = {
  // tooltip: {
  //   triggerOn: 'click', //mousemove、click
  //   padding: 8,
  //   borderWidth: 1,
  //   borderColor: '#ffffff',
  //   formatter: function (e, t, n) {
  //     let data = e.data;
  //     let context = `
  //       <div>
  //         <div class="tooltip-box" style="font-size: 15px;color: #333333;background-color: #fff;">${data.name}（${
  //       data.value || 0
  //     }）</div>
  //         <ul class="tooltip-list"  id="worldCustomerNameBox"></ul>
  //       </div>
  //     `;
  //     return context;
  //   }
  // },
  visualMap: {
    show: true,
    left: 0,
    bottom: 10,
    showLabel: true,
    orient: 'vertical',
    padding: [10, 10, 10, 10],
    inverse: true,
    pieces: [
      {
        min: 11,
        label: '11以上',
        color: '#14E0B9'
      },
      {
        min: 6,
        max: 10,
        label: '6-10个项目',
        color: '#25BEFC'
      },
      {
        min: 3,
        max: 5,
        label: '3-5个项目',
        color: '#2EC055'
      },
      {
        min: 1,
        max: 2,
        label: '1-2个项目',
        color: '#CD8EFF'
      }
    ]
  },
  calculable: false,
  series: [
    {
      name: '',
      type: 'map',
      mapType: 'world',
      geoIndex: 0,
      zoom: 1.2,
      emphasis: {
        label: {
          show: true
        }
      },
      data: worldData,
      nameMap: worldNameMap
    }
  ]
};

// 地图配置项--国内
let chinaOption = {
  // tooltip: {
  //   triggerOn: 'click', //mousemove、click
  //   padding: 8,
  //   borderWidth: 1,
  //   borderColor: '#ffffff',
  //   formatter: function (e, t, n) {
  //     let data = e.data;
  //     let context = `
  //       <div>
  //         <div class="tooltip-box" style="font-size: 15px;color: #333333;background-color: #fff;">${data.name}（${
  //       data.value || 0
  //     }）</div>
  //         <ul class="tooltip-list"  id="chinaCustomerNameBox"></ul>
  //       </div>
  //     `;
  //     return context;
  //   }
  // },
  visualMap: {
    show: true,
    left: 0,
    bottom: 10,
    showLabel: true,
    orient: 'vertical',
    padding: [10, 10, 10, 10],
    inverse: true,
    pieces: [
      {
        min: 11,
        label: '11以上',
        color: '#14E0B9'
      },
      {
        min: 6,
        max: 10,
        label: '6-10个项目',
        color: '#25BEFC'
      },
      {
        min: 3,
        max: 5,
        label: '3-5个项目',
        color: '#2EC055'
      },
      {
        min: 1,
        max: 2,
        label: '1-2个项目',
        color: '#CD8EFF'
      }
    ]
  },
  geo: {
    map: 'china',
    zoom: 1.2, //缩放
    emphasis: {
      label: {
        show: true
      }
    },
    itemStyle: {
      normal: {
        borderColor: 'rgba(0, 0, 0, 0.2)'
      },
      emphasis: {
        areaColor: '#f2d5ad',
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        borderWidth: 0
      }
    }
  },
  series: [
    {
      name: '',
      type: 'map',
      geoIndex: 0,
      data: chinaData
    }
  ]
};

export default { totalOption, guaranteeOption, deviceAllOption, mapOption, chinaOption };
